<html>
  <head>
    <title>“邮”声-登录</title>
    <meta name="decorator" content="default"/>
    <meta name="save" content="history">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <link rel="stylesheet" type="text/css" href="../static/css/login-style.css">
    <meta http-equiv="description" content="ajax方式">
  </head>
  <meta charset="utf-8">
  <script type="text/javascript">
    function login(){
      document.loginForm1.mode.value="get_login_data";
      $.ajax({
        type:'post',
        data:$("#loginForm1").serialize(),
      })
      window.location="../index/";
    }
    function ask_for_validcode(){
      document.loginForm1.mode.value="ask_for_validcode";
      $.ajax({
        type:'post',
        data:$("#loginForm1").serialize(),
      })
    }
  </script>
  <body>
    <!--登录-注册框-->
    <div class="container" >
      <div class="modal-dialog" id="login_form">
        <div class="modal-content">
          <div class="modal-title">
            <!--标题-->
            <ul class="news-nav js-nav-title">
              <li class="on" data="login">酷狗音乐</li>
              <li class="" data="register">网易云音乐</li>
              <li class="" data="register">QQ音乐</li>
            </ul>
          </div>

          <!--酷狗部分-->
          <div class="modal-body index-news-list" id="index-news-list-1">
            <form class="loginForm" id="loginForm1" name="loginForm1" method="post" onsubmit="return false">
              {% csrf_token %}
              <div class="form-group">
                <input class="form-control required" name="name" id="name1" type="text" placeholder="请输入手机号" autocomplete="on">
              </div>
              <div class="form-group1">
                <input class="form-control required" name="password" id="password1" type="text" placeholder="请输入验证码">
              </div>
              <div class="form-group">
                <button class="btn btn-primary2" type="button" onclick="ask_for_validcode()">获取验证码</button>
              </div>
              <div class="form-group1">
                <label for="remember">
                  <input type="checkbox" name="remember" id="remember1" value="0"/> 记住我
                </label>
              </div>
              <div class="form-group">
                <button class="btn btn-primary" type="button" onclick="login()">登&nbsp;&nbsp;&nbsp;录</button>
              </div>
              <!--关闭按键-->
              <div class="close">
                <a href="../firstpage"><img src="../static/img/close.png"></a>
              </div>
              <div>
                <input type="hidden" name = "mode" id="mode">
              </div>
            </form>

          </div>


          <!--网易云音乐部分-->
          <div class="modal-body index-news-list" id="index-news-list-2">
            <form class="loginForm" id="loginForm2" action="" method="post">
              {% csrf_token %}
              <div class="form-group">
                <input class="form-control required" name="name" id="name2" type="text" placeholder="请输入网易云音乐的账号">
              </div>
              <div class="form-group">
                <input class="form-control required" name="password" id="password2" type="password" placeholder="请输入密码">
              </div>
              <div class="form-group">
                <label for="remember">
                  <input type="checkbox" name="remember" id="remember2" value="0"/> 记住我
                </label>
              </div>
              <div class="form-group">
                <button class="btn btn-primary" type="submit"><a href="../index">登&nbsp;&nbsp;&nbsp;录</a></button>
              </div>
              <!--关闭按键-->
              <div class="close">
                <a href="firstpage"><img src="../static/img/close.png"></a>
              </div>
            </form>
          </div>


          <!--QQ音乐部分-->
          <div class="modal-body index-news-list" id="index-news-list-3">
            <form class="loginForm" id="loginForm" action="" method="post">
              {% csrf_token %}
              <div class="form-group">
                <input class="form-control required" name="name" id="name" type="text" placeholder="请输入QQ音乐的账号">
              </div>
              <div class="form-group">
                <input class="form-control required" name="password" id="password" type="password" placeholder="请输入密码">
              </div>
              <div class="form-group">
                <label for="remember">
                  <input type="checkbox" name="remember" id="remember" value="0"/> 记住我
                </label>
              </div>
              <div class="form-group">
                <button class="btn btn-primary" type="submit"><a href="../index">登&nbsp;&nbsp;&nbsp;录</a></button>
              </div>
              <!--关闭按键-->
              <div class="close">
                <a href="firstpage"><img src="../static/img/close.png"></a>
              </div>
            </form>
          </div>



        </div>
      </div>
    </div>

    <!--利用JS实现登陆注册填写情况判断并智能登入页面-->
    <script>
      $(document).ready(function () {
        $(".js-nav-title li").click(function(){
          $(this).attr("class","on");
          $(this).siblings().attr("class","");
          var index = $(".js-nav-title li").index(this);
          $(".index-news-list").css("display","none");
          $("#index-news-list-"+(index+1)).css("display","block");
        });
      });
    </script>
  </body>

</html>